## -*- coding: utf-8 -*-
<%inherit file="/base/base.html"/>
<%namespace file="/component/navigation.html" import="header_nav, rank_extra_lable" />

<div class="span-24 last bodyWrapper">
    <div class="span-23 last bodyWrapper2">
        <div style="background-image: url(/images/login_bg.jpg); height: 800px; margin-top: 10px;">
            ${h.form(h.url_for_www(controller='account', action='create'), method='post', id='registerForm', style="border-right: 1px solid rgb(204, 204, 204); margin: 30px 0pt 30px 50px; width: 550px; float: left;")}
            <div style="border: 1px solid rgb(204, 204, 204); padding: 10px; background-color: white; width: 500px; color: rgb(0, 102, 153);">
                <table cellpadding="2">
                    <tbody>
                        <tr>
                            <td style="width: 65px;"><strong style="color: red;">*</strong> 注册名</td>
                            <td>${h.text('userName', class_='text')} 全站唯一</td>
                        </tr>
                        <tr>
                            <td><strong style="color: red;">*</strong> 密码</td>
                            <td>${h.password('password', class_='text')} 3-15个字符</td>
                        </tr>
                        <tr>
                            <td><strong style="color: red;">*</strong> 密码确认</td>
                            <td>${h.password('password_confirm', class_='text')}</td>
                        </tr>
                        <tr>
                            <td valign="bottom"><strong style="color: red;">*</strong> 验证码</td>
                            <td>
                                <div>${c.captcha_img}</div>
                                <div>${h.text('captcha', class_='text')} ${h.hidden('random', value=c.random)}</div>
                            </td>
                        </tr>
                        <tr>
                            <td><a href="#"><strong style="color: red;">*</strong> 用户条款</a></td>
                            <td><input id="btnSubmit" class="submit" type="button" value="同意条款并注册" /></td>
                        </tr>
                        <tr>
                            <td colspan="2" height="80"><hr/></td>
                        </tr>
                        <tr>
                            <td> 昵称</td>
                            <td>${h.text('realName', class_='text')}</td>
                        </tr>
                        <tr>
                            <td> 性别</td>
                            <td>${h.select("gender", "", [[0, ""], [1, u"男"], [2, u"女"]])}</td>
                        </tr>
                        <tr>
                            <td> 邮件地址</td>
                            <td>${h.text('email', class_='text')} 全站唯一</td>
                        </tr>
                        <tr>
                            <td/>
                            <td><div style="border: 1px solid gray; padding: 5px; color: rgb(216, 118, 34);">留下注册邮箱可以方便职驿网给你发送与您密切相关的信息，比如读者对您文章的评论；如果您遗失了密码，也可以通过您的邮箱找回<br/>
                            请注意：很多邮件服务商会把职驿网发送的邮件识别为垃圾邮件或不明邮件，如果您没有收到职驿网发送的邮件，请注意查看您邮箱中的垃圾邮件， 并且把来自职驿网的邮件设置成不是垃圾邮件</div></td>
                        </tr>
                        <tr>
                            <td> 来自</td>
                            <td>${h.select("city1", "", [["", ""], [u"北京", u"北京"], [u"上海", u"上海"], [u"广州", u"广州"], [u"深圳", u"深圳"], [u"重庆", u"重庆"], [u"武汉", u"武汉"], [u"成都", u"成都"], [u"长沙", u"长沙"]])}
                            如果没有可选城市，可直接输入　${h.text('city', class_='text')}</td>
                        </tr>
                        <tr>
                            <td> 职业</td>
                            <td>${h.select("vocation1", "", [["", ""], [u"程序员", u"程序员"], [u"设计师", u"设计师"], [u"教师", u"教师"], [u"医生", u"医生"], [u"官员", u"官员"], [u"作家", u"作家"], [u"运动员", u"运动员"], [u"歌手", u"歌手"]])}
                            如果没有可选职业，可直接输入　${h.text('vocation', class_='text')}</td>
                        </tr>
                        <tr>
                            <td> 行业</td>
                            <td>${h.select("industry1", "", [["", ""], [u"教育", u"教育"], [u"互联网", u"互联网"], [u"IT行业", u"IT行业"], [u"医务", u"医务"], [u"艺术", u"艺术"]])}
                            如果没有可选行业，可直接输入　${h.text('industry', class_='text')}</td>
                        </tr>
                        <tr>
                            <td colspan="2"></td>
                        </tr>
                        <tr>
                            <td><a href="#"><strong style="color: red;">*</strong> 用户条款</a></td>
                            <td><input id="btnSubmit2" class="submit" type="button" value="同意条款并注册" /></td>
                        </tr>
                        <tr>
                            <td colspan="2"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            ${h.end_form()}
            <div style="float: left; width: 200px; height: 200px; margin-top: 35px; margin-left: 30px; line-height: 2.2; color: black;"> 提示 <br/>
                <br/>
                欢迎注册职驿网的会员。注册成功后，帐号即时开通，马上能够发表文章和评论，能够修改个人资料和密码，邀请朋友和推荐文章。<br/>
                <br/>
                除了基本的发表文章和评论功能，您还可以获得本网站的永久域名个人主页，可以在您的专栏上发表文章和浏览读者对您文章的评论。<br/>
                <br/>
                如果您是第一次使用职驿网，请仔细阅读<a href="#">会员指南</a> <br/>
                <br/>
                有任何问题，可以 <a href="mailto:test.com@gmail.com">联系管理员</a>，
            职驿网愿和您共担职场上的风雨，见证您辛酸的历程，共享您成功的喜悦。 </div>
        </div>
    </div>
</div>

<%def name="head()">
  ${parent.head()}
  ${h.stylesheet_link(h.url_for('/css/home.css'))}
  ${h.javascript_link(h.url_for('/js/jquery.form.js'))}
  ${h.javascript_link(h.url_for('/js/jquery.validate.min.js'))}

  <script type="text/javascript">
  $.validator.addMethod('registerName', function (value) {
	    return /^([a-z]|\d|-)+$/.test(value);
	}, '注册名只能包含小写英文字符，数字和中划线');


  $(document).ready(function() {
	  $("#registerForm").validate({
        onsubmit: false,
	    rules: {
		  userName: {
		    required: true,
		    rangelength: [2, 15],
		    registerName: true,
		    remote: "${h.url_for_www(controller='account', action='validateUserName')}"
		  },
		  password: {
		    required: true,
		    rangelength: [3, 15]
		  },
		  captcha: {
		    required: true
		  },
		  email: {
            rangelength: [0, 50],
            email: true,
            remote: "${h.url_for_www(controller='account', action='validateEmail')}"
		  }
	    },
		messages: {
	      userName: {
		    required: "请提供注册名",
		    rangelength: jQuery.format("请输入{0}到{1}个字符"),
		    remote: jQuery.format("用户名{0}已经被使用！")
          },
		  password: {
			required: "请提供密码",
			rangelength: jQuery.format("请输入{0}到{1}位密码")
		  },
          captcha: {
  		    required: "必须输入注册码"
  		  },
  		  email: {
            rangelength: jQuery.format("Email长度必须在{0}到{1}位之间"),
            email: "请输入合法的Email",
            remote: jQuery.format("Email已经被使用！")
  		  }
		},
		// set this class to error-labels to indicate valid fields
		success: function(label) {
		  // set &nbsp; as text for IE
		  label.html("&nbsp;").addClass("checked");
		}
	  });

	  $('#city1').change(function(e) {
		  $('#city').val($('#city1').val())
	  });

	  $('#vocation1').change(function(e) {
		  $('#vocation').val($('#vocation1').val())
	  });

	  $('#industry1').change(function(e) {
		  $('#industry').val($('#industry1').val())
	  });

      $('#btnSubmit, #btnSubmit2').click(function(e) {
	    if ($("#registerForm").validate().form()) {
		  $("#registerForm").submit();
		}
	  });

  });

  </script>
</%def>

<%def name="header()">
${header_nav()}
${rank_extra_lable(u'注册')}
</%def>